<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="type == 'add' ? '添加考勤' : '编辑考勤'"
    :visible="open"
    @close="closeDialog"
    width="500px"
  >
    <el-form
      label-position="left"
      label-width="80px"
      :model="formData"
      :rules="rules"
      ref="formData"
    >
      <el-form-item label="节次名" required prop="attendanceName">
        <el-input
          v-model="formData.attendanceName"
          maxlength="10"
          show-word-limit
          placeholder="例：第一节课"
        ></el-input>
      </el-form-item>
      <el-form-item label="考勤时间" required prop="time">
        <el-time-picker
          is-range
          value-format="HH:mm:ss"
          v-model="formData.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  addAttendance,
  updateAttendance,
} from "@/api/configuration/attendance";
export default {
  name: "EditSegment",
  props: {
    open: Boolean,
    item: Object,
    type: String,
  },
  data() {
    return {
      title: "新增节次",
      dialogVisible: false,
      formData: {
        attendanceName: "",
        time: "",
      },
      rules: {
        attendanceName: [
          { required: true, message: "请输入节次名称", trigger: "blur" },
        ],
        time: [
          {
            required: true,
            message: "请选择考勤时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    open(val) {
      console.log(this.type);
      if (val) {
        this.reset();
        if (this.type == "add") {
        } else {
          let data = JSON.parse(JSON.stringify(this.item));
          data.time = [data.beginTime, data.endTime];
          this.formData = data;
        }
      }
    },
  },
  methods: {
    closeDialog() {
      this.$emit("update:open", false);
    },

    // 表单重置
    reset() {
      this.formData = {
        attendanceName: "",
        time: "",
      };
      this.resetForm("formData");
    },
    confirm() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          if (this.formData.time[0] == this.formData.time[1]) {
            this.$modal.msgError("开始时间不能与结束时间一致");
            return false;
          }
          this.loading = true;
          try {
            let res;
            let param = {
              beginTime: this.formData.time[0],
              endTime: this.formData.time[1],
              id: this.item.id,
              attendanceName: this.formData.attendanceName,
              schoolId: this.$store.getters.schoolId,
              branchId: this.$store.getters.branchId,
            };
            delete param.time;
            if (this.type == "add") {
              res = await addAttendance(param);
            } else {
              res = await updateAttendance(param);
            }
            const { code } = res;
            if (code == 200) {
              this.reset();
              if (this.type == "add") {
                this.$modal.msgSuccess("新增成功");
              } else {
                this.$modal.msgSuccess("编辑成功");
              }
              this.dialogVisible = false;
              this.$emit("update:open", false);
              this.$emit("refresh");
            }
          } catch (error) {
            console.error(error);
          } finally {
            this.loading = false;
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
</style>
